<template>
    <div class="container">
        <div class="tipBox">
            <el-tag v-for="(item,index) in tagList" :key="index" class="tagBox" @click="getMessage(item.tag)">
                {{item.tagName}}{{tagNum[item.tag]}}
            </el-tag>
        </div>
        <ul class="infinite-list scrollBox" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="close" :key="messageList.length">
            <div class="Box infinite-list-item" v-for="(item,index) in messageList" :key="index">
                <div v-if="item!=undefined">
                    <div class="messageContainer">
                        <img :src="'/file'+item.profile" class="profile">
                        <div class="userInfor">
                            <div>
                                <span class="black">{{item.userName}}</span>
                                <span class="dataTime">{{item.getTime}}</span>
                            </div>
                            <div style="padding-top:0.2rem">
                                <el-rate
                                    v-model="item.score"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}分">
                                </el-rate>
                            </div>
                        </div>
                    </div>
                    <p class="content">{{item.content}}</p>
                    <div class="imgContent">
                        <div v-for="(item,index) in item.photoList" :key="index">
                            <img :src="'/file'+item">
                        </div>
                    </div>
                    <div class="right" @click="clickGood(index)" :class="{disabled:isDisabled[index]}">
                        <img src="../images/赞.svg" class="icon" v-if="item.likes==0">
                        <img src="../images/赞1.svg" class="icon" v-if="item.likes!=0">
                        <span>有用</span>
                        <span style="padding-right:1rem">共{{item.useful}}个赞</span>
                    </div>
                </div>
            </div>
        </ul>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import Vue from 'vue'
export default {
    data(){
        return{
            tagList:[],
            tagNum:{},
            messageList:[],
            currentPage:0,
            size:5,
            close:false,
            tagType:'useful',
            isDisabled:{}
        }
    },
    mounted(){
        this.init();
        this.getTagList();
        this.getTagNum();
        this.load();
    },
    computed:{
        ...mapState(['shopId']),
    },
    methods:{
        async getTagList(){
            await this.getRequest('/estimate/getTag',null,null).then(response=>{
                if(response.code==200){
                    this.tagList=response.obj;
                }
            })
        },
        async getTagNum(){
            let postData={
                shopId:this.shopId
            }
            await this.getRequest('/estimate/getEstimateByShopNum',postData,null).then(response=>{
                if(response.code==200){
                    this.tagNum=response.obj;
                }
            })
        },
        async clickGood(index){
            Vue.set(this.isDisabled,index,true);
            setTimeout(()=>{
                Vue.set(this.isDisabled,index,false);
            },1000);
            if(window.sessionStorage.getItem('tokenStr')){
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    estimateId:this.messageList[index].estimateId
                }
                if(this.messageList[index].likes==0){
                    await this.getRequest('/estimate/addUseful',postData,tokenStr).then(response=>{
                        if(response.code==200)
                            this.messageList[index].useful=this.messageList[index].useful+1;
                            this.messageList[index].likes=1;
                    })
                }else if(this.messageList[index].likes==1){
                    await this.getRequest('/estimate/removeUseful',postData,tokenStr).then(response=>{
                        if(response.code==200)
                            this.messageList[index].useful=this.messageList[index].useful-1;
                            this.messageList[index].likes=0;
                    })
                }
            }
        },
        init(){
            this.currentPage=0;
            this.messageList=[];
            this.close=false;
        },
        getMessage(type){
            this.tagType=type;
            this.init();
        },
        async load(){
            this.close=true;//防止重复加载
            this.currentPage=this.currentPage+1;
            let postData={
                shopId:this.shopId,
                type:this.tagType,
                currentPage:this.currentPage,
                size:this.size
            }
            await this.getRequest('/estimate/getEstimateByShop',postData,null).then(response=>{
                if(response.code==200){
                    for(let i=0;i<response.obj.data.length;i++){
                        let obj=response.obj.data[i];
                        obj.getTime=obj.getTime.slice(0,10);
                        obj.score=obj.score/100;
                        if(obj.photoList!=null){
                            obj.photoList=obj.photoList.split(";");
                        }
                        if(obj.likes==undefined)
                            obj.likes=0;
                        else obj.likes=1;
                        this.messageList.push(obj);
                    }
                }
                if(this.messageList.length>=response.obj.total){
                    this.close=true;//全加载了就关闭
                    return ;
                }
            })
            this.close=false;//开启加载
        }
    }
}
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .disabled{
        pointer-events: none;
    }
    /deep/ .el-rate__item{
        margin:-4px;
    }
    .el-tag{
        font-size:1rem;
    }
    .container{
        @include white;
    }
    .scrollBox{
        @include width-height(100%,70vh);
    }
    .tipBox{
        display: flex;
        background-color: #fff;
        width: 100%;
        padding:0.5rem;
        flex-wrap: wrap;
        .tagBox{
            margin:0.5rem 0.5rem 0 0;
            padding:0 0.5rem;
        }
    }
    .Box{
        padding: 0.5rem 0 0.5rem 0;
        margin-bottom:0.3rem;
        background-color: #fff;
        border-radius: 1rem;
    }
    .messageContainer{
        display: flex;
        padding-left: 0.5rem;
        .profile{
            @include width-height(3rem,3rem);
            border-radius: 50%;
        }
        .userInfor{
            padding-left: 0.5rem;
            position: relative;
            width:100%;
            .black{
                @include font-size-color(1.2rem,#000);
                font-weight: bold;
            }
            .dataTime{
                @include font-size-color(1rem,#666);
                position: absolute;
                right: 1rem;
            }
        }
    }
    .content{
        padding: 0.8rem;
    }
    .imgContent{
        display: flex;
        img{
            @include width-height(6rem,6rem);
            border-radius: 1rem;
            margin-left: 0.5rem;
        }
    }
    .right{
        display: flex;
        margin-right: 1rem;
        flex-direction: row-reverse;
        align-items: center;
        .icon{
            margin-left: 0.3rem;
            @include width-height(1.2rem,1.2rem);
        }
    }
</style>